<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class='wrapper'></div>
    <script>
        /*
            3、实现简单的组件化
            comment:字符串上没办法添加事件，将字符串转化为dom,dom上添加事件，render返回dom而不是字符串了，所以不能使用innerHtml了，改为appendChild
            todo: 简单的实现了功能，需要进一步优化使LikeButton更加的通用
        */

        const createDOMFromString = (domString) => {
            const div = document.createElement('div')
            div.innerHTML = domString
            return div
        }

        class LikeButton {

            constructor() {
                this.state = { isLiked: false }
            }

            changeLikeText() {
                const likeText = this.el.querySelector('.like-text')
                this.state.isLiked = !this.state.isLiked
                likeText.innerHTML = this.state.isLiked ? '取消' : '点赞'
            }

            render() {
                this.el = createDOMFromString(` 
            <button class='like-button'> 
                <span class='like-text'>
                    点赞
                    </span> 
                <span>👍</span> 
            </button> 
      `)
                this.el.addEventListener('click', this.changeLikeText.bind(this), false)
                return this.el
            }
        }

        const wrapper = document.querySelector('.wrapper')

        const likeButton1 = new LikeButton()
        wrapper.appendChild(likeButton1.render())

        const likeButton2 = new LikeButton()
        wrapper.appendChild(likeButton2.render())
    </script>
</body>

</html>